<template>
    <div class="login-page">
        <header class="header">
            <!-- logo -->
            <div class="flex">
                <img src="./yango.png" class="logo" alt="logo">
                <img src="./yuanyuzhou.png" class="logo" alt="logo">
            </div>
            <div>
<!--              <Button class="login-btn register" type="error" @click="changeModalType('register')">邮箱注册</Button>-->
              <Button class="login-btn" type="error" @click="openLogin">立即登录</Button>
            </div>

        </header>
        <main class="content">
            <!-- banner -->
            <section class="banner">
                <img src="@/assets/login/banner.jpg" alt="banner">
                <div class="banner-title">
                    <h1>{{welcomeH11}} {{welcomeH12}}</h1>
                    <h2>{{welcomeH2}}</h2>
                </div>
            </section>
            <section class="architecture" v-if="false">
                <!-- 架构图 -->
                <div class="diagram">
                    <img src="@/assets/login/architecture.png" alt="">
                </div>
                <!-- 系统介绍 -->
                <div class="introduce">
                    <!-- 针对常规靶场业务场景少，业务整体流程不完善，业务方向单一等问题，训练靶场以网络系统仿真平台为基础，整合培训、演练、比赛、测试评估等网络安全服务，全面服务于人才培养、应急演练、技术研究等领域。用“训”积累网安核心技能，“演”、“竞”锤炼实战综合能力，“测”提升信息系统整体防御能力，“研”突破最新攻防技术，循环提升，促进网络安全综合能力。 -->
                   {{welcomeIntroduce}}
                </div>
            </section>
        </main>
        <footer class="footer" data-bottomText="阳光学院" v-if="!welcomeOnlyShowBanner">
            <ul>
                <li>
                    <span class="footer-icon-wrapper">
                        <img src="@/assets/login/environ-icon.png" alt="">
                    </span>
                    <p>环境仿真配置简单便捷</p>
                </li>
                <li>
                    <span class="footer-icon-wrapper">
                        <img src="@/assets/login/flash-icon.png" alt="">
                    </span>
                    <p>大规模复杂网络生成快速</p>
                </li>
                <li>
                    <span class="footer-icon-wrapper">
                        <img src="@/assets/login/collect-icon.png" alt="">
                    </span>
                    <p>数据采集多源异构</p>
                </li>
                <li>
                    <span class="footer-icon-wrapper">
                        <img src="@/assets/login/task-icon.png" alt="">
                    </span>
                    <p>多任务流程编排导调</p>
                </li>
            </ul>
        </footer>
        <LoginModal ref="loginModal" :changeForm="changeModalType"/>
        <RegisterModal ref="registerModal" :changeForm="changeModalType"/>
    </div>
  </template>

  <script>
  import LoginModal from '../login-modal.vue'
  import RegisterModal from "../register-modal.vue";
  import cookieUse from '@/libs/cookie.js';
  import { mapState } from 'vuex';
  export default {
    name:'Homer',
    components:{LoginModal,RegisterModal},
    data() {
      return {
        langText:'',
        kldz:{
            welcomeH11:'',
            welcomeH12:'御网信安实战创新单位平台',
            welcomeLogo:require('@/assets/login/logo_kldz.png')
        },
        fzsfdx:{
            welcomeH11:'福州师范大学',
            welcomeH12:'单位靶场',
            welcomeLogo:require('@/assets/login/logo_fzsfdx.jpg')
        },
        zsyh:{
            welcomeH11:'浙商银行',
            welcomeH12:'单位靶场',
            welcomeLogo:require('@/assets/login/logo_zsyh.png')
        },
        staticConfig:null,
        formType:'login'
      };
    },
    computed:{
        ...mapState('style', {
            welcomeH11({ themeConfig }){
                return '产教一体' //this.staticConfig ? this.staticConfig.welcomeH11 : typeof themeConfig.welcomeH11 === 'string' ? themeConfig.welcomeH11 : '软极网络';
            },
            welcomeH12({ themeConfig }){
                return '实战教学' //this.staticConfig ? this.staticConfig.welcomeH12 : typeof themeConfig.welcomeH12 === 'string' ? themeConfig.welcomeH12 : '极智靶场';
            },
            welcomeH2: ({ themeConfig }) => {
                return typeof themeConfig.welcomeH2 === 'string' ? themeConfig.welcomeH2 : '支持训练、培训、演练、竞赛、科研、测评及业务创新等全业务场景';
            },
            // this.list.includes(this.$route.name) ? this[this.$route.name].welcomeH2 : 
            welcomeIntroduce: ({ themeConfig }) => {
                return themeConfig.welcomeIntroduce || '针对常规靶场业务场景少，业务整体流程不完善，业务方向单一等问题，训练靶场以网络系统仿真平台为基础，整合培训、演练、比赛、测试评估等网络安全服务，全面服务于人才培养、应急演练、技术研究等领域。用“训”积累网安核心技能，“演”、“竞”锤炼实战综合能力，“测”提升信息系统整体防御能力，“研”突破最新攻防技术，循环提升，促进网络安全综合能力。';
            },
            welcomeLogo({ themeConfig }) {
                return this.staticConfig ? this.staticConfig.welcomeLogo : themeConfig.welcomeLogo || require('@/assets/login/LOGO.png');
            },
            welcomeOnlyShowBanner: ({ themeConfig }) => {
                return themeConfig.welcomeOnlyShowBanner === '1' ? true : false
            },
        })
    },
    watch:{
        $route(to,from){
            if(to.meta.login){
                this.staticConfig = this[this.$route.name];
                sessionStorage.setItem('loginPage',this.$route.name)
            }
        }
    },
    methods: {
      changeModalType(val){
        this.formType = val
        if(val==='register'){
          this.$refs.loginModal.closeModal();
          this.$refs.registerModal.openModal();
        }else {
          this.openLogin()
        }
      },
      openLogin(){
        this.$refs.registerModal.closeModal();
        this.$refs.loginModal.openModal();

      }
    },
    created(){
        this.$Message.destroy()
    },
    mounted() {
        let getToken = cookieUse.getCookie('desig-token') || '';
        let getLang = 'zh' //cookieUse.getCookie('desig-lang') || 'zh';
        if (getLang === 'zh') {
            this.langText = 'English';
        } else {
            this.langText = '中文';
        }
        this.$i18n.locale = getLang;
        if (getToken) {
            localStorage.setItem('token', getToken); // 为topo页面存储
        }
        this.staticConfig = this[this.$route.name];
        sessionStorage.setItem('loginPage',this.$route.name)
        // this.changeModalType('register')
    },
  };
  </script>

  <style scoped>
    .login-page{
        --header-bgcolor:#0467CC;
        --content-bgcolor:#F5F6F7;
        --content-text-bgcolor:#fff;
        --content-color:#1D252C;
        --footer-color:#fff;
        --footer-bg-color:linear-gradient(180deg, #1D252C 0%, #323E48 100%);
        --footer-img-bgcolor:#C81125;
        font-size: 14px;
    }
    .header{
        background-color: var(--header-bgcolor);
        padding: 0 5%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 90px;
    }
    .header .logo {
        /* max-width: calc(100% - 300px); */
        max-height: 90px;
        margin-right: 40px;
        margin-top: 5px;
    }
    .header .logo:last-child{
        max-height: 50px;
    }
    .header .login-btn{
        padding: 4px 20px;
        background: #C81125;
        border-radius: 277px 277px 277px 277px;
        color:#fff;
        font-weight: 700;
    }
    .content{
        background-color: var(--content-bgcolor);
    }
    .content  .banner{
        position: relative;
    }
    .content  .banner img{
        width:100%;
        display: block;
    }
    .content .banner-title{
        position: absolute;
        top: 0;
        bottom:0;
        left:0;
        right: 0;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color:#fff;
        margin-top:-20px;
    }
    @font-face {
        font-family: 'PMZDZQ2';
        /*src: url('~@/assets/font/庞门正道标题体2.0增强版.ttf');*/
    }
    .content .banner-title h1{
        font-family: PMZDZQ2;
        font-size: 100px;
        margin-bottom: 20px;
        font-weight: normal;
    }
    /* .content .banner-title h2{

    } */
    .content .architecture{
        padding: 109px 13%;
        display: flex;
        justify-content: space-between;
    }
    .architecture .diagram{
        flex:0 0 51%;
    }
    .diagram img{
        width:100%;
        height:100%;
    }
    .architecture .introduce{
        flex:0 0 40%;
        background: var(--content-text-bgcolor) url(~@/assets/login/text-logo.png) no-repeat left bottom;
        border-radius: 64px 0px 64px 0px;
        color:var(--content-color);
        padding:4em;
        background-origin: content-box;
        line-height: 2.2;
        font-size: 16px;
        box-sizing: border-box;
    }
    .footer{
        position: relative;
        padding:59px 13% 140px;
        background: var(--footer-bg-color);
        overflow: hidden;
    }
    .footer:before{
        content:'';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        border: 40px solid transparent;
        border-bottom-color: var(--footer-img-bgcolor);
        border-left-width: 70vw;
        border-right-width: 70vw;
        color: #fff;
        transform: translate(-20vw);
    }
    .footer:after{
        /* content:'全聚合数字技术训练靶场'; */
        content:attr(data-bottomText);
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        line-height: 40px;
        text-align: center;
        color: #fff;
        opacity: .8;
    }
    .footer ul {
        display: flex;
        justify-content: space-between;
    }
    .footer ul li{
        flex:1;
        display: flex;
        flex-direction: column;
        align-items: center;
        color:var(--footer-color);
    }
    .footer-icon-wrapper{
        display: flex;
        justify-content: center;
        align-items: center;
        width: 4em;
        height: 4em;
        background: var(--footer-img-bgcolor);
        border-radius: 50%;
        margin-bottom: 20px;
        font-size: 18px;
    }
    .footer-icon-wrapper img{
        width:40%;
    }
    .register{
      background:#ff000000 !important;
      color: #666 !important;
      border: 1px solid #666 !important;
      margin-right: 16px;
    }
    .register:focus {
      box-shadow: 0 0 0 2px rgba(89, 70, 66, 0.2);
    }
  </style>
